<template>
    <div style="width: 100%;text-align: right;margin-bottom: 10px;">
        <ElButton type="danger" @click="clearSkList">清空</ElButton>
        <ElButton type="primary" @click="addSkObj">添加</ElButton>
    </div>
    <ElTable class="list-table is-border" :="$attrs" border :data="skObj.skList">
        <ElTableColumn label="收款类型">
            <template #default="{ row, $index }">
                <ElFormItem>
                    <ElSelect v-model="row.sklxVal" clearable>
                        <ElOption v-for="item in sklx" :key="item.val" :label="item.name" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="收款金额">
            <template #default="{ row, $index }">
                <ElFormItem>
                    <ElInput v-model="row.skje"></ElInput>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="收款状态">
            <template #default="{ row, $index }">
                <ElFormItem>
                    <ElSelect v-model="row.skztVal" clearable>
                        <ElOption v-for="item in skzt" :key="item.val" :label="item.name" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="收款时间">
            <template #default="{ row, $index }">
                <ElFormItem>
                    <ElDatePicker v-model="row.sksj" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" clearable />
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="收款渠道">
            <template #default="{ row, $index }">
                <ElFormItem>
                    <ElSelect v-model="row.skqdVal" clearable>
                        <ElOption v-for="item in skqd" :key="item.val" :label="item.name" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="是否开票">
            <template #default="{ row, $index }">
                <ElFormItem>
                    <ElSelect v-model="row.sfkpVal" clearable>
                        <ElOption v-for="item in sfkp" :key="item.val" :label="item.name" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="开票状态">
            <template #default="{ row, $index }">
                <ElFormItem>
                    <ElSelect v-model="row.kpztVal" clearable>
                        <ElOption v-for="item in kpzt" :key="item.val" :label="item.gsmc" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="备注">
            <template #default="{ row }">
                <ElInput v-model="row.bz"></ElInput>
            </template>
        </ElTableColumn>
    </ElTable>
    <div style="margin-top: 10px;">
        <ElButton type="primary" @click="postSkListFunc">确定</ElButton>
        <ElButton>取消</ElButton>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from 'vue'
import { ElInput, ElSelect, ElTableColumn, ElDatePicker, ElFormItem } from 'element-plus'
import { getDictInfo } from '@/views/menus/n-renew-manage-new/api';

interface Props {
    skBatchId
}

const props = defineProps({
    skBatchId: String,
    skList: Array
});

const skObj = reactive({
    skList: []
});

const emit = defineEmits(['post-sk'])

// 定义校验规则（完全在子组件内部管理）
const rules = {
    skje: { required: true, message: '请输入收款金额', trigger: ['blur', 'change'] },
    sklxVal: { required: true, message: '请选择收款类型', trigger: ['blur', 'change'] },
    skztVal: { required: true, message: '请选择收款状态', trigger: ['blur', 'change'] },
    sksj: { required: true, message: '请选择收款时间', trigger: ['blur', 'change'] },
    skqdVal: { required: true, message: '请选择收款渠道', trigger: ['blur', 'change'] },
    sfkpVal: { required: true, message: '请选择是否开票', trigger: ['blur', 'change'] },
    fpId: { required: true, message: '请选择客户发票', trigger: ['blur', 'change'] },
    kpztVal: { required: true, message: '请选择开票状态', trigger: ['blur', 'change'] },
};

let sklx = ref([]);
let skzt = ref([]);
let skqd = ref([]);
let sfkp = ref([]);
let kpzt = ref([]);

onMounted(async () => {
    sklx.value = await getDictInfo("sklx");
    skzt.value = await getDictInfo("skzt");
    skqd.value = await getDictInfo("skqd");
    sfkp.value = await getDictInfo("sfkp");
    kpzt.value = await getDictInfo("kpzt");
})

watch(
    () => props.skList,  // 监听 prop
    (newVal) => {
        skObj.skList = newVal ? [...newVal] : [];  // 深拷贝避免引用问题
    },
    { immediate: true }  // 立即执行一次（相当于初始化）
);


const addSkObj = () => {
    skObj.skList.push({
        'kpztVal': '未开票'
    });
}

const clearSkList = () => {
    skObj.skList = []
}

const postSkListFunc = async () => {
    console.log(props.skBatchId);
    console.log(skObj.skList);
    emit('post-sk', {
        skBatchId: props.skBatchId,
        skList: skObj.skList
    });
}
</script>

<style scoped lang="scss">
:deep(.el-table td),
:deep(.el-table th) {
    text-align: center;
}

:deep(.el-form-item) {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}
</style>